<template>
  <el-row :gutter="6">
    <el-col
      v-for="(item, index) in state.cavityList"
      :key="item.pkCavity"
      :lg="6"
      :md="6"
      :sm="6"
      :xs="6"
    >
      <div
        :class="[
          'item-content',
          state.selectPkCavity === item.pkCavity ? 'selected' : '',
        ]"
        @click="toSelectCavity(item.pkCavity)"
      >
        <div class="item-index">
          {{ index }}
        </div>
        <div style="height: 5px"></div>
        <div>{{ item.cavityName }}</div>
        <div>{{ item.cavityCode }}</div>
        <div>{{ item.cavitySpec }}</div>
        <div style="overflow: hidden">{{ item.remark }}</div>
      </div>
    </el-col>
  </el-row>
</template>
<script setup>
  import { getCavityListApi } from '@/api/equip/mold_api'
  import { localStorageConfig } from '@/config/localstorage.config'
  const pkCorp = localStorage.getItem(localStorageConfig.__pkCorp)
  const state = reactive({
    cavityList: [],
    selectPkCavity: '',
  })
  const toSelectCavity = (pkCavity) => {
    if (!pkCavity || pkCavity === state.selectPkCavity) {
      state.selectPkCavity = ''
    } else {
      state.selectPkCavity = pkCavity
    }
    _emits('toSelectCavity', state.selectPkCavity)
  }
  const queryCavityList = async (selectMold) => {
    state.selectPkCavity = ''
    if (!selectMold) {
      state.cavityList = []
      return
    }
    const { data = [] } = await getCavityListApi({
      pkMoldDoc: selectMold,
      pkCorp,
      state: 1,
    })
    state.cavityList = data
    // console.log('queryCavitys', data)
  }

  defineExpose({ queryCavityList })
  const _emits = defineEmits(['toSelectCavity'])
</script>
<style lang="scss" scoped>
  .item-content {
    position: relative;
    width: 100%;
    height: 88px;
    padding: 0 6px;
    line-height: 20px;
    cursor: pointer;
    border: 1px solid #409eff;
    border-radius: 5px;
    // &:hover {
    //   color: #fff;
    //   background-color: #409EFF;
    // }

    .item-index {
      position: absolute;
      top: -5px;
      right: -5px;
      width: 20px;
      height: 20px;
      line-height: 20px;
      color: rgb(255, 255, 255);
      text-align: center;
      background-color: dodgerblue;
      border-radius: 10px;
    }
  }
  .selected {
    color: #fff;
    background-color: #409eff;
  }
</style>
